<template>
  <div>
    <div class="nav">
      <ul>
        <li>门票</li>
        <span class="mp-tab-slider" mp-role="tabSlider" style="left: 15px;"></span>
        <li>景区服务</li>
        <li>一日游</li>
        <li>热销门票</li>
      </ul>
    </div>
    <div class="title">
        <ul class="title-afternoon">
          <li>
            <div class="man-size">
              <span class="imgswiper"></span>故宫成人票
            </div>
            <ul>
              <li>
                <div class="afternoon-price">
                  <div class="afternoon">上午场</div>
                  <div class="price"><p><span>￥40</span>起</p></div>
                </div>
                <ul>
                  <li>
                    <div class="info-manprice">
                      <div class="info">
                        <span>【故宫成人票【刷证件入园，送手</span>
                        <p>机电子导览】【上午场】</p>
                        <span class="book">23:59前可订明日</span>
                        <p>预订须知</p>
                      </div>
                      <div class="manprice">
                        <p class="clo-size">￥40</p>
                        <p class="books">预订</p>
                      </div>
                    </div>
                    <div class="info-manprice">
                      <div class="info">
                        <span>【故宫成人票【刷证件入园，送手</span>
                        <p>机电子导览】【上午场】</p>
                        <span class="book">23:59前可订明日</span>
                        <p>预订须知</p>
                      </div>
                      <div class="manprice">
                        <p class="clo-size">￥40</p>
                        <p class="books">预订</p>
                      </div>
                    </div>
                    <div class="info-manprice">
                      <div class="info">
                        <span>【故宫成人票【刷证件入园，送手</span>
                        <p>机电子导览】【上午场】</p>
                        <span class="book">23:59前可订明日</span>
                        <p>预订须知</p>
                      </div>
                      <div class="manprice">
                        <p class="clo-size">￥40</p>
                        <p class="books">预订</p>
                      </div>
                    </div>
                    <div class="info-manprice">
                      <div class="info">
                        <span>【故宫成人票【刷证件入园，送手</span>
                        <p>机电子导览】【上午场】</p>
                        <span class="book">23:59前可订明日</span>
                        <p>预订须知</p>
                      </div>
                      <div class="manprice">
                        <p class="clo-size">￥40</p>
                        <p class="books">预订</p>
                      </div>
                    </div>
                    <div class="info-manprice">
                      <div class="info">
                        <span>【故宫成人票【刷证件入园，送手</span>
                        <p>机电子导览】【上午场】</p>
                        <span class="book">23:59前可订明日</span>
                        <p>预订须知</p>
                      </div>
                      <div class="manprice">
                        <p class="clo-size">￥40</p>
                        <p class="books">预订</p>
                      </div>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
    </div>
  </div>
</template>

<script>
export default { //  组件配置项
  name: 'DetailBooking'
}
</script>

<style lang="stylus" scoped="scoped">
  .nav
    width 100%
    height 60px
    position relative
    border-bottom 1px solid silver
    ul
      li
        width 25%
        height 60px
        line-height 60px
        float left
        text-align center
        font-size 0.36rem
      .mp-tab-slider
        position: absolute;
        top: 59px;
        left: 0;
        display: inline-block;
        height: .04rem;
        width: 1.4rem;
        background-color: #00bcd4;
  .title
    display flex
    padding 0 0.2rem
    .title-afternoon
      width 100%
      .afternoon-price
        display flex
        padding 0.4rem 0
        .afternoon
          width 95%
          font-size 0.34rem
        .price
          p
            span
              font-size 0.4rem
              color #FFB436
  .man-size
    padding-top 0.4rem
    font-size 0.36rem
  .info-manprice
    display flex
    padding 0.3rem 0
    border-bottom 1px solid silver
    .info
      width 85%
      p
        line-height 0.6rem
      .book
        font-size 0.24rem
    .manprice
      text-align center
      padding-top 0.4rem
      .clo-size
        color #FFB436
        font-size 0.4rem
      .books
        width 3rem
        height 0.8rem
        line-height 0.8rem
        background #FFB436
        color #FFFFFF
        border-radius 0.08rem
</style>
